<template>
  <div id="gantt-container">
    <!-- 标题区域 -->
    <div class="title-zone">
      <div class="column-name">成员</div>
      <template v-if="props.options && props.options.extraColumns && props.options.extraColumns.length > 0">
        <div class="column-name2" v-for="(item, index) in props.options.extraColumns" :key="index">{{ item.titleName }}</div>
      </template>
      <div class="title-wrapper">
        <div class="column-title" v-for="(item, index) in showMonths" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 内容区域 -->
    <template v-if="leftMonth && leftYear && rightMonth && rightYear">
      <GanttContent
        v-for="(item, index) in props.dataSource"
        :key="index"
        :contentData="props.dataSource[index]"
        :leftMonth="leftMonth"
        :leftYear="leftYear"
        :rightMonth="rightMonth"
        :options="props.options"
        :rightYear="rightYear"
      />
    </template>
  </div>
</template>

<script setup name="GanttComponent">
import { ref } from 'vue'
import GanttContent from './GanttContent.vue'
const monthArray = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月',
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
]
const monthMap = {
  一月: '01',
  二月: '02',
  三月: '03',
  四月: '04',
  五月: '05',
  六月: '06',
  七月: '07',
  八月: '08',
  九月: '09',
  十月: '10',
  十一月: '11',
  十二月: '12'
}

const showMonths = ref([])
const leftYear = ref('')
const leftMonth = ref('')
const rightMonth = ref('')
const rightYear = ref('')
const props = defineProps({
  dataSource: {
    type: Array,
    required: false
  },
  options: {
    type: Object,
    required: false
  }
})
function init() {
  const now = new Date()
  let currentMonthNumber = now.getMonth()
  let currentYearNumber = now.getFullYear()
  // 计算左侧
  if (currentMonthNumber === 1) {
    leftYear.value = currentYearNumber - 1 + ''
  } else {
    leftYear.value = currentYearNumber + ''
  }
  if (currentMonthNumber >= 11) {
    leftMonth.value = currentMonthNumber - 1 + ''
  } else {
    leftMonth.value = '0' + (currentMonthNumber - 1)
  }
  showMonths.value = monthArray.slice(currentMonthNumber - 2, currentMonthNumber + 10)
  //计算右侧
  if (showMonths.value[0] === '一月') {
    rightYear.value = currentYearNumber + ''
  } else {
    rightYear.value = currentYearNumber + 1 + ''
  }
  rightMonth.value = monthMap[showMonths.value[11]]
}
init()
</script>

<style scoped>
#gantt-container {
  padding: 10px;
  width: 100%;
}
.title-zone {
  overflow: hidden;
}
.column-name {
  float: left;
  height: 56px;
  width: 120px;
  text-indent: 2em;
  text-align: left;
  line-height: 56px;
  font-size: 14px;
  font-weight: 500;
  color: #7a808d;
  background-color: #f3f5f8;
}
.column-name2 {
  height: 56px;
  width: 71px;
  text-align: center;
  font-size: 14px;
  line-height: 56px;
  font-weight: 500;
  color: #7a808d;
  background-color: #f3f5f8;
}
.title-wrapper {
  height: 56px;
  margin-left: 120px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.column-title {
  height: 56px;
  width: 8.33%;
  background: #f3f5f8;
  font-size: 14px;
  font-weight: 500;
  color: #7a808d;
  text-align: center;
  line-height: 56px;
}
</style>
